<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>肯得基会员管理系统</title>
		<link rel="stylesheet" href="css/ex.scss" type="text/css">
		<link rel="stylesheet" href="css/idea.css" type="text/css">
		<link rel="stylesheet" href="css/main.css" type="text/css">
		<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
	</head>
	<body>


		<!-- 导航栏 -->
		<div class="dh">
			<ul class="menu-list" style="background-color: #bf112c;" >
					<li>
						<img src="img/kfclogo.PNG"/>
						<a >肯得基会员服务展示</a>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-danger" onclick="window.location.href='/user/main.do'" >
                           管理员点击此处，进入后台管理系统
                        </button>
                    </li>
			</ul>
		</div>

		<div class="lb">
				<!-- 展示 -->
				<div class="display">
					<table >
						<tr>
							<td></td>
							<td><img src="img/LB1.PNG"/></td>
							<td><img src="img/LB2.PNG"/></td>
							<td><img src="img/LB3.PNG"/></td>
						</tr>
					</table>
<!--					滚动公告-->
					<div class='ad'>
						<i class="iconfont">&#xe633;</i>
						<br>
						<p class='content'>
							<span> 肯德基（Kentucky Fried Chicken，肯塔基州炸鸡，简称KFC），
								是美国跨国连锁餐厅之一，也是世界第二大速食及最大炸鸡连锁企业，
								1952年由创始人哈兰·山德士（Colonel Harland Sanders）创建，
								 主要出售炸鸡、汉堡、薯条、盖饭、蛋挞、汽水等高热量快餐食品。
								</span>
						</p>
					</div>
					<table  class="table table-striped">
						<tr >
                            <td></td>
                            <td></td>
							<td>
								会员类别：
							</td>
							<td>会员名称</td>
							<td>会员价格</td>
							<td>会员特权描述</td>
						</tr>
						<tr>
                            <td></td>
                            <td></td>
                            <td></td>
							<td>大神卡</td>
							<td>18.0元</td>
							<td>点餐免外卖费，早餐六折，咖啡（仅限中杯大杯）10元，下午茶（仅限下午茶两件套）10元，日式炒饭7折</td>
						</tr>
						<tr>
                            <td></td>
                            <td></td>
                            <td></td>
							<td>宅神卡</td>
							<td>9.9元</td>
							<td>点餐免外卖费</td>
						</tr>
					</table>
					
				</div>
			</div>
		</div>
		
		<!-- 一些导航链接 -->
		<div class="footer">
				<div class="footer-display">
					<p id="a">顾客至上，让顾客都有一种宾至如归的感觉。</p>
				</div>
				<!-- 可交互的  -->
				
				<div class="footer-top">
					<ul>
						<li  onmouseover="a();">
							服务宗旨
						</li>
						<li onmouseover="b();">
							经营理念
						</li>
						<li onmouseover="c();">
							团队精神
						</li>
						<li onmouseover="d();">
							成功的秘诀
						</li>
					</ul>
				</div>
			<!-- 尾 -->
			<div class="footer-bottom">
				<strong>Copyright &copy; 2022 <a
				                href="#">陈博</a>.
				        </strong> All rights reserved.
			</div>
		</div>
		<script type="text/javascript">
			function a(){
				var obj = document.getElementById("a");
				    obj.innerHTML= "顾客至上，让顾客都有一种宾至如归的感觉。";
			}
			function b(){
				var obj = document.getElementById("a");
				    obj.innerHTML= "不断推出新的产品";
			}
			function c(){
				var obj = document.getElementById("a");
				    obj.innerHTML= "致力于为员工提供完善的培训、福利保障和发展计划";
			}
			function d(){
				var obj = document.getElementById("a");
				    obj.innerHTML= "永远向充满朝气、勇于挑战自己的年轻人敞开大门";
			}
			(function(){
			myCarousel = function (){
				var carousel = {
			      containerCarousel: document.querySelector('.container .carousel'),
			      listCarousel: document.querySelectorAll('.container .carousel li'),
				  rightIndex:3,//默认right所在位置,从1开始编号
				  timer:null //定时器对象
				};
				function move() {
				      var left = document.querySelector('.left');
				      var center = document.querySelector('.center');
				      var right = document.querySelector('.right');
				      var nextRight=document.querySelector("li:nth-child("+(carousel.rightIndex+1)+")");
				     //重新更新class值
				     left.className='unset';
				     center.className="left";
				     right.className='center';
				     nextRight.className='right';
				     carousel.rightIndex++;
				     if(carousel.rightIndex===carousel.listCarousel.length){
				     	//不设置0，则第一张图会缺失。
				     	 carousel.rightIndex=0;//必须设置为0，nth-child(carousel.rightIndex+1)
				     }
				}
				function buildCarousel() {
					//最少2张图进行轮播
				      if (carousel.listCarousel.length > 2) {
				        for (var i = 2;i<carousel.listCarousel.length;i++) {
				          	carousel.listCarousel[0].className = 'left';
				        	carousel.listCarousel[1].className = 'center';
				        	carousel.listCarousel[2].className = 'right';
				        	carousel.listCarousel[i].className='unset';
				        }
				      }
				}
				function cancel(){
					carousel.listCarousel.forEach(function(o,i){
						o.onmouseover=function(){
							//注意，不能直接写timer,否则无法清除定时器
							clearInterval(carousel.timer);
						}
						o.onmouseout=function(){
							carousel.timer=setInterval(move, 2000);
						}
					});
				}
			    function start() {
			      buildCarousel();
			      cancel();
			      carousel.timer=setInterval(move, 2000);
			    }
			    start();
			};
			myCarousel();
		})();
		</script>
		
	</body>
</html>
